/*
 * @Description: 乘车记录的乘车信息详情
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:56:04
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-29 23:04:09
 */
<template>
  <div
    class="details_main fontsize32"
    v-wechat-title="$route.meta.title"
  >
    <loading
      :state="loadingState"
      :loadingType="loadingType"
    ></loading>
    <div class="ticket_info part">
      <div class="bus flex-h flex-vc">
        <i class="iconfont icon-bus fontsize48"></i>
        <span>{{record.START_STATION_NAME}} → {{record.END_STATION_NAME}}</span>
      </div>
      <p><span>票类型：</span>{{record.TICKET_DATE_TYPE | ticketTypeFormate}}</p>
      <p><span>出票状态：</span>{{record.ORDER_STATE | recordTypeFormate}}</p>
      <p><span>班次：</span>{{record.TRAIN_NUM}}</p>
    </div>
    <div class="ticket_price part">
      <p><span>票价：</span>￥{{record.TICKET_PRICE | priceFilters}} </p>
      <p><span>数量：</span>{{record.TICKET_COUNT}}</p>
      <p><span>合计：</span>￥{{record.TOTAL_PRICE | priceFilters}}</p>
      <p><span>折扣：</span>{{record.DISCOUNT_DESC}}</p>
      <div class="pay flex-h flex-hsb">
        <p class="pay_num">实付：￥{{record.PAY_PRICE | priceFilters}}</p>
        <p class="pay_state">{{record.PAY_STATE | orderState}}</p>
      </div>
    </div>
    <div class="dishonour">
      <button
        v-if="record.CAN_REFUND===1"
        class="fontsize32"
        @click="Dishonour"
      >退票</button>
    </div>
    <Dishonour
      ref="dishonour"
      :ticketDetail='ticketDetail'
    ></Dishonour>
  </div>
</template>

<script>
import { getOrderDetail } from './../../interface/getInterface'
import { ticketTypeFormate, recordTypeFormate, priceFilters } from '@/wx/customizedShuttleBus/filters/filters'
import Dishonour from '../../components/record/Dishonour'
export default {
  components: {
    Dishonour
  },
  data() {
    return {
      record: { // 购票记录数据
        'DEPART_TIME': 0,
        'DISCOUNT': 0,
        'DISCOUNT_DESC': '',
        'END_STATION_NAME': '',
        'ORDER_STATE': 0,
        'PAY_PRICE': 0,
        'PAY_STATE': 0,
        'START_STATION_NAME': '',
        'TICKET_COUNT': 0,
        'TICKET_DATE_TYPE': 0,
        'TICKET_PRICE': 0,
        'TOTAL_PRICE': 0
      },
      loadingState: true, // 页面加载状态
      loadingType: 'loading', // 页面加载类型
      ticketDetail: {
        ticketTypeID: [],
        ticketType: 0 // 1为票详情页面
      }
    }
  },
  filters: {
    ticketTypeFormate,
    recordTypeFormate,
    priceFilters,
    orderState: (value) => { // 订单状态标准化
      let orderState = {
        '0': '待支付',
        '1': '支付成功',
        '-1': '取消',
        '-21': '退款中',
        '-22': '已退款',
        '-23': '部分退款'
      }
      return orderState[value]
    }
  },
  mounted() {
    let params = { // 请求参数
      ORDER_NO: this.$route.query.orderNo
    }
    getOrderDetail(params).then(data => { // 请求接口获取数据
      this.ticketDetail.ticketTypeID = data.TICKET_TYPE_IDS
      console.warn('///////////', this.ticketTypeID)
      this.record = data
      this.loadingState = false
    }).catch(err => {
      console.log(err)
      this.loadingType = 'fail'
    })
  },
  methods: {
    Dishonour() {
      this.$refs.dishonour.mask.show()
    }
  }
}
</script>

<style lang="scss" scoped>
.details_main {
  height: 100%;
  width: 100%;
  min-height: fill-available;
  box-sizing: border-box;
  background-color: #f2f5f6;
  padding-top: 32px;
  position: relative;
  .part {
    width: 622px;
    margin: auto;
    margin-bottom: 32px;
    background-color: #fff;
    border-radius: 4px; /*no*/
    padding: 32px;
  }
  .ticket_info {
    .bus {
      height: 60px;
      // line-height: 60px;
      padding-bottom: 24px;
      border-bottom: 1px solid #ddd; /*no*/
      i {
        position: relative;
        top: 6px;
        color: #027aff;
      }
      span {
        width: 500px;
        // height: 60px;
        // line-height: 60px;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 32px;
      }
    }
    p {
      font-size: 28px;
      margin-top: 16px;
      color: #666666;
    }
  }
  .ticket_price {
    padding-top: 1px;
    p {
      margin-top: 32px;
      span {
        color: #999;
      }
    }
    .pay {
      border-top: 1px solid #ddd; /*no*/
      padding-top: 30px;
      margin-top: 32px;
      p {
        height: 44px;
        line-height: 44px;
        margin-top: 0;
      }
      .pay_num {
        color: #e84d38;
      }
      .pay_state {
        color: #027aff;
      }
    }
  }
  .dishonour {
    width: 100%;
    bottom: 60px;
    position: absolute;
    button {
      width: 686px;
      height: 72px;
      background-color: #027aff;
      color: #fff;
      border: 0;
      border-radius: 25px; /*no*/
      margin: 0 32px;
    }
  }
}
</style>
